<template>
  <div class="default-column">

    <el-row :gutter="10">
      <el-col :span="1" style="text-align: right; margin: 5px">
      </el-col>
      <el-col :span="3" style="text-align: right; margin: 5px">
        <p style="margin: 30px">
          我的主页
        </p>
      </el-col>
    </el-row>

    <el-row :gutter="10">
      <el-col :span="2" style="text-align: right; margin: 5px">
      </el-col>
      <el-col :span="2" style="text-align: right; margin: 5px">
        客服ID：
      </el-col>
      <el-col :span="6">
        <el-input
          suffix-icon="el-icon-phone-outline"
          v-model="$store.state.user.serviceId" disabled size="small">
        </el-input>
      </el-col>
    </el-row>

    <el-row :gutter="10">
      <el-col :span="2" style="text-align: right; margin: 5px">
      </el-col>
      <el-col :span="2" style="text-align: right; margin: 5px">
        客服名称：
      </el-col>
      <el-col :span="6">
        <el-input
          suffix-icon="el-icon-service"
          v-model="$store.state.user.serviceName" disabled size="small">
        </el-input>
      </el-col>
      <el-col :span="6">
        <el-button type="primary" icon="el-icon-edit" circle @click="updateServiceName"></el-button>
      </el-col>
    </el-row>

    <el-row :gutter="10">
      <el-col :span="2" style="text-align: right; margin: 5px">
      </el-col>
      <el-col :span="2" style="text-align: right; margin: 5px">
        备注：
      </el-col>
      <el-col :span="6">
        <el-input
          suffix-icon="el-icon-more"
          v-model="$store.state.user.memo" disabled size="small">
        </el-input>
      </el-col>
      <el-col :span="6">
        <el-button type="primary" icon="el-icon-edit" circle @click="updateServiceMemo"></el-button>
      </el-col>
    </el-row>

    <el-row :gutter="10">
      <el-col :span="2" style="text-align: right; margin: 5px">
      </el-col>
      <el-col :span="6">
        <el-button type="primary" icon="el-icon-edit" @click="updateServicePassword" size="small">修改密码</el-button>
      </el-col>
    </el-row>

  </div>
</template>

<script>
  export default {
    name: 'Me',
    data () {
      return {
      }
    },
    created() {

    },
    methods: {
      updateServiceName() {
        this.$prompt('请输入新的用户名', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /^[\u4e00-\u9fa5]{1,4}$/,
          inputErrorMessage: '用户名格式不正确'
        }).then(({ value }) => {
          this.updateServiceNameInternal(value);
        }).catch(() => {});
      },
      async updateServiceNameInternal(value) {
        let data = await this.$$put('/customer', { serviceId: this.$store.state.user.serviceId, serviceName: value });
        this.checkResponse(data);
        this.getLoginSession();
      },

      updateServiceMemo() {
        this.$prompt('请输入新的备注', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /^[\u4e00-\u9fa5]{1,7}$|^[\dA-Za-z_]{1,14}$/,
          inputErrorMessage: '备注格式不正确'
        }).then(({ value }) => {
          this.updateServiceMemoInternal(value);
        }).catch(() => {});
      },
      async updateServiceMemoInternal(value) {
        let data = await this.$$put('/customer', { serviceId: this.$store.state.user.serviceId, memo: value });
        this.checkResponse(data);
        this.getLoginSession();
      },

      updateServicePassword() {
        this.$prompt('请输入新的密码', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /^[\u4e00-\u9fa5]{1,100}$|^[\dA-Za-z_]{1,100}$/,
          inputErrorMessage: '密码格式不正确'
        }).then(({ value }) => {
          this.updateServicePasswordInternal(value);
        }).catch(() => {});
      },
      async updateServicePasswordInternal(value) {
        let data = await this.$$put('/customer/password', { serviceId: this.$store.state.user.serviceId, password: value });
        this.checkResponse(data);
        this.getLoginSession();
      },

      async getLoginSession() {
        let data = await this.$$get('/security/login/session');
        if (this.checkResponse(data)) {
          this.updateUserInfo2(data.data.data);
          this.$message.success('更新成功');
        }
      },
      updateUserInfo2(data) {
        this.$store.state.user.id = data.id;
        this.$store.state.user.serviceId = data.serviceId;
        this.$store.state.user.serviceName = data.serviceName;
        this.$store.state.user.memo = data.memo;
        this.$store.state.user.grade = data.grade;

        console.info(this.$store.state.user);
      }
    },
  }
</script>

<style lang="less" scoped>
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>
